<template>
    <div class="knowledge-list-container">
      <!-- 顶部筛选和操作区域 -->
      <div class="header-actions" v-if="!showUploadPage">
        <div class="title" >
          <template v-if="!currentEditingKnowledge">知识库列表</template>
          <template v-else>
            <n-button text @click="backToList">
              <n-icon><div class="i-carbon:arrow-left"></div></n-icon>
            </n-button>
            {{ currentEditingKnowledge.name }}
          </template>
        </div>
        <div class="search-create" v-if="!currentEditingKnowledge">
          <n-input-group>
            <n-input placeholder="搜索知识库" v-model:value="searchKeyword" @blur="searchKownledgeList">
              <template #prefix>
                <n-icon><div class="i-carbon:search"></div></n-icon>
              </template>
            </n-input>
          </n-input-group>
        </div>
        <div v-else>
     
        </div>
      </div>
  
      <!-- 知识库列表表格 -->
      <div v-if="!currentEditingKnowledge">
        <n-data-table
          :columns="columns"
          :data="knowledgeList"
          :pagination="false"
          :row-class-name="rowClassName"
        />
      </div>
  
      <!-- 知识库详情页 - 文件列表 -->
        <!-- 知识库详情页 - 文件列表 -->
        <div  class="knowledge-detail" v-else-if="!showUploadPage">
        <div class="file-list-header">
          <!-- <div class="file-list-title">
            <span>文件 ({{ fileList.length }}/1000)
             
            </span>
            <n-button text size="small" class="refresh-button" @click="refreshFileList">
              <n-icon><svg t="1747793774306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15266" width="200" height="200"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="15267" fill="#2c2c2c"></path></svg></n-icon>
         
            </n-button>
          </div> -->
         <div style="display: flex;align-items: center;">
            <div class="search-create" v-if="!showUploadPage" style="margin-right: 5px;">
          <n-input-group>
            <n-input placeholder="搜索文档" v-model:value="searchFileList" @blur="getFileList">
              <template #prefix>
                <n-icon><div class="i-carbon:search"></div></n-icon>
              </template>
            </n-input>
          </n-input-group>
        </div>
        <n-button circle class="refresh-button" @click="refreshFileList">
              <n-icon><svg t="1747793774306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15266" width="200" height="200"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="15267" fill="#2c2c2c"></path></svg></n-icon>
         
            </n-button>
          <n-button quaternary type="primary" color="#fffff" @click="addDocument" class="add-button" v-if="!showUploadPage">
            继续添加
          </n-button>
         </div>
        </div>
        
        <!-- 替换原来的自定义文件列表为 n-data-table -->
        <n-data-table
          :columns="fileColumns"
          :data="fileList"
          :pagination="false"
   
          class="file-table"
          :row-class-name="fileRowClassName"
          :empty="() => h('div', { class: 'empty-file-list' }, [
            h('div', { class: 'empty-icon' }, [
              h(NIcon, { size: 48 }, () => h('div', { class: 'i-carbon:document-blank' }))
            ]),
            h('div', { class: 'empty-text' }, '无数据')
          ])"
        />
      </div>
  <!-- 文件上传页面 -->
  <div v-else class="upload-page">
  <div class="upload-header">
    <div class="upload-title">
      <n-button text @click="backToFileList">
        <n-icon><div class="i-carbon:arrow-left"></div></n-icon>
      </n-button>
      {{ currentEditingKnowledge.name }}
    </div>
    <div>
      <n-button  quaternary type="primary" color="#fffff" @click="saveUpload" class="save-button">
        保存
      </n-button>
      <n-button  @click="cancelUpload" class="cancel-button">
        取消
      </n-button>
    </div>
  </div>
  
  <div class="upload-content">
    <div class="upload-area">
        <n-upload
  ref="uploadRef"
  multiple
  :default-upload="false"
  :max="1000"
  :show-file-list="false"
  accept=".txt,.docx,.doc,.pdf,.xlsx,.xsl"
  @change="handleUploadChange"
  directory-dnd
>
  <div class="upload-box">
    <div class="upload-icon">
      <n-icon size="48"><div class="i-carbon:upload"></div></n-icon>
    </div>
    <div class="upload-text">点击上传 / 拖拽到此区域</div>
    <div class="upload-hint">支持 TXT / DOCX / DOC / PDF/ XLSX /XSL，单个文件不超过100MB，PDF页数≤300页，TXT每个文件不超过20 MB，最多上传1000个文件，单个用户空间总量1GB。</div>
  </div>
</n-upload>
    </div>
    
    <div class="file-list-header" v-if="uploadedFiles.length > 0">
    
      <div class="file-list-columns">
        <div class="file-column file-name">文件名</div>
        <div class="file-column file-size">大小</div>
        <div class="file-column file-status">上传状态</div>
        <div class="file-column file-actions">操作</div>
      </div>
    </div>
    
    <div class="file-list" v-if="uploadedFiles.length > 0">
      <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
        <div class="file-column file-name">
          <n-icon class="file-icon"><div class="i-carbon:document"></div></n-icon>
          <span>{{ file.name }}</span>
        </div>
        <div class="file-column file-size">{{ file.size }}</div>
        <div class="file-column file-status">
          <n-tag size="small" type="warning" v-if="file.status === 'uploaded'">待上传</n-tag>
          <n-tag size="small" type="warning" v-else-if="file.status === 'uploading'">上传中</n-tag>
          <n-tag size="small" type="error" v-else>上传失败</n-tag>
        </div>
        <div class="file-column file-actions">
          <n-button text type="error" @click="removeUploadedFile(index)">
            <n-icon><div class="i-carbon:trash-can"></div></n-icon>
          </n-button>
        </div>
      </div>
    </div>
  </div>
</div>
      <!-- 底部分页和统计信息 -->
      <div class="footer-info" v-if="!currentEditingKnowledge">
        <div class="stats">
        </div>
        <div class="pagination-controls">
          <n-pagination
            v-model:page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :on-update:page="handlePageChange"
            :on-update:page-size="handlePageSizeChange"
            :item-count="totalKnowledge"
            :prefix="paginationPrefix"
            show-size-picker
          />
        </div>
      </div>
      
  
      <div class="footer-info" v-if="currentEditingKnowledge && !showUploadPage">
        <div class="stats">
        </div>
        <div class="pagination-controls">
          <n-pagination
            v-model:page="currentPageByFile"
            v-model:page-size="pageSizeByFile"
            :page-sizes="[10, 20, 50]"
             :on-update:page="handlePageChangeByFile"
            :on-update:page-size="handlePageSizeChangeByFile"
            :item-count="totalKnowledgeByFile"
            :prefix="paginationPrefixByFile"
            show-size-picker
          />
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed, h, onMounted } from 'vue'
  import { 
    NButton, 
  NInput, 
  NInputGroup, 
  NIcon, 
  NDataTable, 
  NPagination, 
  NSelect,
  NSpace,
  NTag,
  NPopconfirm,
  NAvatar,
  NUpload,
  useMessage
  } from 'naive-ui'
  import * as GlobalAPI from '@/api'
import { size } from 'lodash-es'
  
  // 添加消息提示
  const message = useMessage()
  
  // 状态筛选选项
  const statusFilter = ref('全部')
  const statusOptions = [
    { label: '全部', value: '全部' },
    { label: '未使用', value: '未使用' },
    { label: '已使用', value: '已使用' }
  ]
  
  // 搜索关键词
  const searchKeyword = ref('')
  const searchFileList = ref('')
  // 分页相关
  const currentPage = ref(1)
  const pageSize = ref(10)
  //文件列表分页
  const currentPageByFile = ref(1)
  const pageSizeByFile = ref(10)
  const paginationPrefix = ({ itemCount }) => `共 ${itemCount} 条`
  const paginationPrefixByFile = ({ itemCount }) => `共 ${itemCount} 条`

  const pagination = computed(() => ({
    page: currentPage.value,
    pageSize: pageSize.value,
    showSizePicker: true,
    pageSizes: [10, 20, 50],
    prefix: paginationPrefix,
    onChange: (page) => {
      currentPage.value = page
      getKnowledgeList()
    },
    onUpdatePageSize: (size) => {
      pageSize.value = size
      currentPage.value = 1
      getKnowledgeList()

    }
  }))
  
  // 当前编辑的知识库
  const currentEditingKnowledge = ref(null)
  
  // 文件列表数据
  const fileList = ref([
    {
      id: '1',
      name: '12333.docx',
      status: '已上传',
      size: '10.00KB',
      date: '2025-05-19 14:23'
    }
  ])
  
  // 知识库列表数据
  const knowledgeList = ref([])
  const totalKnowledge = ref(0)
  const totalKnowledgeByFile = ref(0)
const handlePageChange = (page) => {
    console.log(page,'page')
   currentPage.value = page
   getKnowledgeList() 
  
  }
 const handlePageSizeChange = (size) => {
    pageSize.value = size
    currentPage.value = 1
    getKnowledgeList()
  }

  const handlePageChangeByFile = (page) => {
    console.log(page,'page')
   currentPageByFile.value = page
   getFileList() 
  
  }
  const handlePageSizeChangeByFile = (size) => {
    pageSizeByFile.value = size
    currentPageByFile.value = 1
    getFileList()
  }

  const usedStorage = ref('1G')
  const totalStorage = ref('10G')
  
  // 表格列定义
  const columns = [
    {
      title: '知识库名称',
      key: 'name',
      render(row) {
        return h('div', { class: 'knowledge-name-cell',style:{ display: 'flex'} }, [
          // 使用图片替换原来的图标
          h('div', { class: 'knowledge-icon-wrapper' }, [
            h('img', { 
              src: 'https://open-agents-web-cdn-prd.hunyuan.tencent.com/public/e9e36eb6453112301e0c.png',
              style: {
                width: '40px',
                height: '30px',
                objectFit: 'contain'
              }
            })
          ]),
          h('div', { class: 'knowledge-info' }, [
            h('span', { 
              class: 'knowledge-name',
              style: {
                wordBreak: 'break-word',
                whiteSpace: 'normal',
                maxWidth: '200px'
              }
            }, row.name),
            h('span', { 
              class: '',
              style: {
                wordBreak: 'break-word',
                whiteSpace: 'normal',
                maxWidth: '200px',
                color: '#666',
                fontSize: '12px',
                marginTop: '5px'
              }
            }, row.description)
          ])
        ])
      }
    },
    {
      title: '所有者',
      key: 'owner',
      render(row) {
        return h('div', { class: 'owner-cell' }, [
          h('span', { class: 'owner-name' }, '管理员')
        ])
      }
    },
    {
      title: '编辑时间',
      key: 'updated_at',
      render(row) {
        return h('div', { class: 'time-cell', style: {
          display: 'flex',
          alignItems: 'center',
          gap: '6px',
          color: '#666'
        }}, [
          h('div', { class: 'time-icon-wrapper', style: {
            display: 'flex',
            alignItems: 'center',
          }}, [
            h(NIcon, { size: 16, color: '#999' }, () => h('div', { class: 'i-carbon:time' }))
          ]),
          h('span', (formatTimestamp(row.updateTime)))
        ])
      }
    },
    {
      title: '状态',
      key: 'status',
      render(row) {
        const isUsed = row.app_count > 0
        return h(
          NTag,
          {
            type: isUsed ? 'success' : 'default',
            size: 'small',
            round: true,
            bordered: false
          },
          { default: () => (isUsed ? '已使用' : '未使用') }
        )
      }
    },
    {
      title: '操作',
      key: 'actions',
      render(row) {
        return h(NSpace, { align: 'center' }, [
          h(
            NButton,
            {
              quaternary: true,
              size: 'small',
              class: 'action-button',
              onClick: () => editKnowledge(row)
            },
            { 
              default: () => '',
              icon: () => h(NIcon, () => h('div', { class: 'i-carbon:edit' ,style:{'fontSize':'16px'}},))
            }
          ),
        
        ])
      }
    }
  ]
  
  // 根据筛选条件过滤知识库列表
  const filteredKnowledgeList = computed(() => {
    let filtered = knowledgeList.value
  
    // 根据状态筛选
    if (statusFilter.value !== '全部') {
      const isUsed = statusFilter.value === '已使用'
      filtered = filtered.filter(item => (item.app_count > 0) === isUsed)
    }
  
    // 根据关键词搜索
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase()
      filtered = filtered.filter(item => 
        item.name.toLowerCase().includes(keyword) || 
        (item.description && item.description.toLowerCase().includes(keyword))
      )
    }
  
    return filtered
  })
  
  // 行样式
  const rowClassName = (row) => {
    return 'knowledge-table-row'
  }
  
  function formatTimestamp(timestamp) {
    if(!timestamp) return '------'
    return timestamp.slice(0, 10)
    //const date = new Date(timestamp * 1000); // 转为毫秒
    
    //const year = date.getFullYear();
    // const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
    // const day = String(date.getDate()).padStart(2, '0');
    // const hours = String(date.getHours()).padStart(2, '0');
    // const minutes = String(date.getMinutes()).padStart(2, '0');
    // const seconds = String(date.getSeconds()).padStart(2, '0');
  
   // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; 
  }
  function getStatus(status) {
    let data={
        '2':['已完成','success'],
        '1':['排列中','error'],
    }

    return data[status]?data[status]:['','']
  }
  // 获取知识库列表
  const getKnowledgeList = async () => {
    try {
      const page = currentPage.value
      const limit = pageSize.value
      const keyword = searchKeyword.value
   
      const res = await GlobalAPI.getKnowledge(page, limit,keyword)
      const json = await res.json()
      console.log(json,'klodata')
      if (json.content !== undefined) {
        console.log(json.content, 'klodata')
        knowledgeList.value = json.content
        totalKnowledge.value = json.totalElements || json.content.length
      }
    } catch (error) {
      console.error('获取知识库列表失败', error)
    }
  }
  const getKnowledgeDocumentsList = async (data_id) => {
    try {
      const page = currentPage.value
      const limit = pageSize.value
      const res = await GlobalAPI.getKnowledgeDocuments(data_id,page,limit)
      const json = await res.json()
      
      if (json.data !== undefined) {
        console.log(json, 'klodata')
        totalKnowledgeByFile.value = json.total || json.content.length

      }
    } catch (error) {
      console.error('获取知识库列表失败', error)
    }
  }
  
  // 创建知识库
  const createKnowledge = () => {
    console.log('创建知识库')
    // 实现创建知识库的逻辑
  }

  const dataSetId=ref('')
  // 编辑知识库
  const editKnowledge = (row) => {
    console.log('编辑知识库', row)
    currentEditingKnowledge.value = row
    dataSetId.value=row.id
    // 获取知识库文件列表
    getKnowledgeFiles(row.id)
  }
  
  // 返回知识库列表
  const backToList = () => {
    currentEditingKnowledge.value = null
  }
  
 const searchKownledgeList=()=>{
    getKnowledgeList()
 }
const getFileList=()=>{
    getKnowledgeFiles(dataSetId.value,searchFileList.value)
 
}
  // 获取知识库文件列表
  const getKnowledgeFiles = async (knowledgeId,keyword='') => {
    try {
      // 这里应该调用API获取文件列表
      const page = currentPageByFile.value
      const limit = pageSizeByFile.value
       const res = await GlobalAPI.getKnowledgeDocuments(knowledgeId,keyword,page,limit)
       const json = await res.json()
    if (json.content) {
        console.log(json.content)
        fileList.value = json.content
        totalKnowledgeByFile.value = json.totalElements || json.content.length

      }
      
      // 暂时使用模拟数据
   
    } catch (error) {
      console.error('获取知识库文件列表失败', error)
    }
  }
  
  // 删除知识库
  const deleteKnowledge = async (id) => {
    console.log('删除知识库', id)
    // 实现删除知识库的逻辑
    try {
      // const res = await GlobalAPI.deleteKnowledge(id)
      // if (res.ok) {
      //   getKnowledgeList()
      // }
    } catch (error) {
      console.error('删除知识库失败', error)
    }
  }
  
  const showUploadPage = ref(false)
  // 添加文档
  const addDocument = () => {
    showUploadPage.value = true

    console.log('添加文档')
    // 实现添加文档的逻辑
  }
  
  // 删除文件
  const deleteFile = async(fileId) => {
    
     try {
     const res = await GlobalAPI.deleteFileList(currentEditingKnowledge.value.id,fileId)
       if (res.ok) { 
        getFlieList()
    }
    } catch (error) {
      console.error('删除知识库失败', error)
    }
  }
  // 上传文件相关
const uploadRef = ref(null)
const uploadedFiles = ref([])

// 返回文件列表
const backToFileList = () => {
  showUploadPage.value = false
}

// 处理上传变化
const handleUploadChange = ({ file, fileList }) => {
  console.log('文件变化:', file, fileList)
  // 检查文件类型和大小
  const validTypes = ['.txt', '.docx', '.doc', '.pdf','.xlsx','.xsl']
  const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
  
  if (!validTypes.includes(fileExt)) {
    message.error('不支持的文件类型')
    return
  }
  
  if (file.file && file.file.size > 100 * 1024 * 1024) { // 100MB
    message.error('文件大小超过限制')
    return
  }
  
  // 添加到上传列表
  if (file.status === 'removed') {
    // 如果是移除文件，从列表中删除
    const index = uploadedFiles.value.findIndex(f => f.id === file.id)
    if (index !== -1) {
      uploadedFiles.value.splice(index, 1)
    }
  } else {
    // 添加新文件 - 确保保存原始文件对象
    uploadedFiles.value.push({
      id: file.id,
      name: file.name,
      size: file.file ? file.file.size : 0,
      rawFile: file.file, // 保存原始文件对象
      status: 'uploaded' // 简化处理
    })
    console.log('已添加文件到上传列表:', uploadedFiles.value)
  }
}

// 保存上传
const saveUpload = async () => {
  console.log(dataSetId.value,' 继续添加 ')
  if (uploadedFiles.value.length === 0) {
    message.error('请先上传文件')
    return
  }
  
  try {
    // 创建新的 FormData 对象
    const formData = new FormData()
    
    // 添加知识库ID
    //let data={"indexing_technique":"high_quality","process_rule":{"rules":{"pre_processing_rules":[{"id":"remove_extra_spaces","enabled":true},{"id":"remove_urls_emails","enabled":true}],"segmentation":{"separator":"###","max_tokens":500}},"mode":"custom"}}
    //formData.append('data', JSON.stringify(data))
    
    // 遍历文件并添加到 FormData
    uploadedFiles.value.forEach((file, index) => {
      if (file.rawFile) {
        console.log(`添加文件到FormData: ${file.name}`, file.rawFile)
        formData.append(`file`, file.rawFile) // 使用原始文件对象
      } else {
        console.error(`文件 ${file.name} 没有原始文件对象`)
      }
    })
    
    // 检查 FormData 是否包含文件
    for (let [key, value] of formData.entries()) {
      console.log(`FormData 内容: ${key} = `, value)
    }
    
    // 调用上传API
    message.loading('正在上传文件...')
    const res = await GlobalAPI.uploadFile(dataSetId.value, formData)
    setTimeout(async() => {
        showUploadPage.value = false
        uploadedFiles.value=[]
    
    }, 1000)
 setTimeout( async()=>{
    try {
    const res = await GlobalAPI.getKnowledgeDocuments(currentEditingKnowledge.value.id)

      const json = await res.json()
    if (json.content) {
        console.log(json.content,'upupup')
        fileList.value = json.content
      }
   
    } catch (error) {
      
    }
 },2000)
 
  } catch (error) {
 
  }
}

// 取消上传
const cancelUpload = () => {
  uploadedFiles.value = []
  showUploadPage.value = false
}
// 移除已上传文件
const removeUploadedFile = (index) => {
  // 从上传列表中移除指定索引的文件
  if (index >= 0 && index < uploadedFiles.value.length) {
    // 获取要移除的文件信息，用于日志记录
    const fileToRemove = uploadedFiles.value[index]
    console.log(`移除文件: ${fileToRemove.name}`)
    
    // 从数组中移除该文件
    uploadedFiles.value.splice(index, 1)
    
    // 如果需要，可以在这里添加其他逻辑，比如通知用户
    message.success(`已移除文件: ${fileToRemove.name}`)
  } else {
    console.error('无效的文件索引:', index)
    message.error('移除文件失败')
  }
}
// 刷新文件列表
  const refreshFileList = async () => {
    if (!currentEditingKnowledge.value || !currentEditingKnowledge.value.id) {
      message.error('无法刷新文件列表')
      return
    }
    
    //message.loading('正在刷新文件列表...')
    getFlieList()
  }
  const  getFlieList= async()=>{
    try {
    const res = await GlobalAPI.getKnowledgeDocuments(currentEditingKnowledge.value.id)

      const json = await res.json()
    if (json.content) {
        console.log(json.content)
        fileList.value = json.content
      }
      message.success('文件列表已刷新')
    } catch (error) {
      console.error('刷新文件列表失败', error)
      message.error('刷新文件列表失败')
    }
  }
  // 文件表格列定义
  const fileColumns = [
    {
      title: '文件名称',
      key: 'name',
      render(row) {
        return h('div', { class: 'file-name-cell' ,style:{ display: 'flex',alignItems:'center'}}, [
          h(NIcon, { class: 'file-icon' }, () => h('div', { class: 'i-carbon:document' })),
          h('span', { 
            style: {
              marginLeft: '8px',
              maxWidth: '300px',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              display: 'inline-block'
            }
          }, row.docName)
        ])
      }
    },
    {
      title: '上传时间',
      key: 'updateTime',
      render(row) {
        return formatTimestamp(row.updateTime)
      }
    },
    {
      title: '状态',
      key: 'docStoType',
      render(row) {
        const statusInfo = getStatus(row.docStoType)
        return h(
          NTag,
          {
            type: statusInfo[1],
            size: 'small',
            round: true,
            bordered: false
          },
          { default: () => statusInfo[0] }
        )
      }
    },
    // 修改操作列，添加确认弹框
    {
      title: '操作',
      key: 'actions',
      render(row) {
        return h(
          NPopconfirm,
          {
            onPositiveClick: () => deleteFile(row.id),
            positiveText: '确认',
            negativeText: '取消'
          },
          {
            trigger: () => h(
              NButton,
              {
                text: true,
                type: 'error',
              },
              {
                default: () => '',
                icon: () => h(NIcon, () => h('div', { class: 'i-carbon:trash-can' }))
              }
            ),
            default: () => '确定要删除此文件吗？'
          }
        )
      }
    }
  ]
  
  // 文件行样式
  const fileRowClassName = (row) => {
    return 'file-table-row'
  }
  onMounted(() => {
    getKnowledgeList()
  })
  </script>
  
  <style lang="scss" >
  .knowledge-list-container {
    padding: 24px;
    background-color: #fff;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  
  .title {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .filter-section {
    display: flex;
    align-items: center;
  }
  
  .filter-label {
    margin-right: 8px;
    color: #666;
    font-size: 14px;
  }
  
  .search-create {
    display: flex;
    gap: 12px;
  }
  
  .footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
  }
  
  .stats {
    color: #666;
    font-size: 14px;
    background-color: #f9f9f9;
    padding: 6px 12px;
    border-radius: 4px;
  }
  
  .knowledge-name-cell {
    display: flex;
    align-items: center;
    padding: 8px 0;
  }
  
  .knowledge-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #1890ff;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  .knowledge-info {
    display: flex;
    flex-direction: column;
  }
  
  .knowledge-name {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
  }
  
  .document-count {
    color: #999;
    font-size: 12px;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .owner-cell {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .owner-name {
    color: #666;
    font-size: 14px;
  }
  
  .time-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
  }
  
  .time-icon-wrapper {
    display: flex;
    align-items: center;
  }
  
  .knowledge-table-row {
    height: 64px;
    transition: background-color 0.2s;
  }
  
  .knowledge-table-row:hover {
    background-color: #f9f9f9;
  }
  
  .action-button {
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.3s;
  }
  
  .action-button:hover {
    background-color: rgba(24, 144, 255, 0.1);
    color: #1890ff;
  }
  
  .delete-button:hover {
    background-color: rgba(245, 34, 45, 0.1);
    color: #f5222d;
  }
  
  .pagination-controls {
    margin-top: 8px;
  }
  
  :deep(.n-pagination .n-pagination-prefix) {
    margin-right: 12px;
    color: #666;
  }
  
  :deep(.n-data-table .n-data-table-th) {
    background-color: #fafafa;
    font-weight: 500;
  }
  
  :deep(.n-button.n-button--primary-type) {
    font-weight: 500;
  }
  
  /* 知识库详情页样式 */
  .knowledge-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .file-list-header {
    display: flex;
    justify-content: end;
    margin-bottom: 16px;
  }
  
  .file-list-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;

  }
  

  
  .file-list-columns {
    display: flex;
    padding: 12px 16px;
    background-color: #fafafa;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    color: #666;
    width: 100%;
  }
  
  .file-list {
    border: 1px solid #f0f0f0;
    border-radius: 0 0 4px 4px;
    flex: 1;
  }
  
  .file-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
  }
  
  .file-item:last-child {
    border-bottom: none;
  }
  
  .file-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .file-name {
    flex: 3;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .file-icon {
    color: #1890ff;
    font-size: 20px;
  }
  
  .file-size {
    flex: 1;
    color: #666;
  }
  
  .file-date {
    flex: 2;
    color: #666;
  }
  
  .file-actions {
    flex: 1;
    text-align: right;
  }
  
  .empty-file-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    color: #999;
  }
  
  .empty-icon {
    margin-bottom: 16px;
    color: #d9d9d9;
  }
  
  .empty-text {
    font-size: 14px;
  }
  .theme-button{
    background: #ffff;
    color: #000;
  }

  /* 上传页面样式 */
.upload-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.upload-title {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.upload-area {
  margin-bottom: 24px;
}

.upload-box {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
}

.upload-box:hover {
  border-color: #bababa;
}



.upload-icon {
  margin-bottom: 16px;
  color: #bababa;
}

.upload-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 12px;
  color: #999;
  max-width: 600px;
  margin: 0 auto;
}

.save-button {
  background-color: #f4f5f5 !important;
  border: red !important;
  margin-right: 12px;
}
.add-button {
  background-color: #f4f5f5 !important;

}

.save-button:hover {
  border: red !important;

}

.cancel-button {
  color: #666;
}

.theme-button {
  color: #7c3aed !important;
  background: #fff;
}

.theme-button:hover {
  background-color: rgba(124, 58, 237, 0.1) !important;
}
.knowledge-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: transparent; /* 修改为透明背景 */
    margin-right: 12px;
    flex-shrink: 0;
  } 

  .knowledge-name {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
  }
  </style>
  
  <style scoped>

  
  /* 添加n-upload组件的自定义样式 */
:deep(.n-upload-trigger) {
  width: 100%;
}

:deep(.n-upload-dragger) {
  padding: 0;
  height: auto;
}
.refresh-button {
    color: #7c3aed;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 5px;
  }
  
  .refresh-button:hover {
    background-color: rgba(124, 58, 237, 0.1);
  }
  </style>